<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>如家酒店管理系统</title>
    <style type="text/css">

        #loginoutbtn:hover {
            background: #FF5722;
            color: #f8f8f8;
        }

        #resetpass:hover {
            background: #FF5722;
            color: #f8f8f8;
        }
    </style>

    <link rel="stylesheet" href="lib/layui/css/layui.css">

</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header" style="background-color: #009688;">
        <div class="layui-logo layui-hide-xs layui-bg-green">如家酒店管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
                lay-header-event="menuLeft"><i
                    class="layui-icon layui-icon-spread-left"></i></li>

            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;"
                                                        _url="page/staff.html">员工管理</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;" _url="page/vip.html">会员管理</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="javascript:;" _url="page/room.html">房间管理</a></li>
				<li class="layui-nav-item"><a href="javascript:;"
					_url="echarts.html">数据分析</a> <!--        <dl class="layui-nav-child">
                    <dd>
                        <a href="">menu 11</a>
                    </dd>
                    <dd>
                        <a href="">menu 22</a>
                    </dd>
                    <dd>
                        <a href="">menu 33</a>
                    </dd>
                </dl>--></li>
			</ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;"> <img src="lib/rem.jpg" class="layui-nav-img">
                    <span id="staff_name"></span>
                </a>
                <dl class="layui-nav-child layui-bg-gray" >
                    <dd>
                        <a href="javascript:;" _url="resetpass.html" id="resetpass">修改密码</a>
                    </dd>

                    <dd>
                        <a href="javascript:;" id="loginoutbtn">退出系统</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>


    <!-- background-image: url(lib/11.jpg); -->
    <div class="layui-body"
         style="left: 0px; bottom:0px; background-size: 1600px;">
        <!-- 内容主体区域 -->

        <iframe src="echarts.html" style="height: 99%; width: 100%; border: none"
                id="main"></iframe>


    </div>

  <!--  <div class="layui-footer">
        &lt;!&ndash; 底部固定区域 &ndash;&gt;

    </div>-->
</div>
<script src="lib/layui/layui.js"></script>
<script>
    //JS
    layui
        .use(
            ['element', 'layer', 'util'],
            function () {
                var element = layui.element, layer = layui.layer, util = layui.util, $ = layui.$;

                //退出系统
                $("#loginoutbtn").click(function () {
                    layer.confirm('确认要退出系统吗？', {icon: 3, title: '退出系统提示'}, function () {
                        //点击确定后执行的代码
                        $.ajax({
                            //后台注销掉session
                            url: "loginout ",
                            success: function (result) {

                                layer.alert('正在退出系统,请等待.......', {
                                    time: 5 * 1000
                                    , skin: 'layui-layer-molv' //样式类名
                                    , success: function (layero, index) {
                                        var timeNum = this.time / 1000, setText = function (start) {
                                            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                                        };
                                        setText(!0);
                                        this.timer = setInterval(setText, 1000);
                                        if (timeNum <= 0) clearInterval(this.timer);
                                    }
                                    , end: function () {
                                        //clearInterval(this.timer);
                                        top.location.href = "login.html";
                                    }
                                });

                            }
                        });

                    });
                });
                $.ajax({
                    url: "islogin",
                    success: function (result) {
                        console.log(result);
                        if (!result) {
                            //返回的是是空串
                            top.location.href = "login.html";
                        } else {
                            $("#staff_name").text(result.name);
                        }
                    }
                });
                $("[_url]").click(function () {

                    var url = $(this).attr("_url");
                    $("#main").attr("src", url);
                });

                //头部事件
                util
                    .event(
                        'lay-header-event',
                        {
                            //左侧菜单事件
                            menuLeft: function (othis) {
                                layer.msg('展开左侧菜单的操作', {
                                    icon: 0
                                });
                            },
                            menuRight: function () {
                                layer
                                    .open({
                                        type: 1,
                                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                                        area: [
                                            '260px',
                                            '100%'],
                                        offset: 'rt' //右上角
                                        ,
                                        anim: 5,
                                        shadeClose: true
                                    });
                            }
                        });
            });
</script>
</body>
</html>